﻿<div class="ui-widget-content">
	<h3>Efeitos Animados - Transições de Classes: addClass, removeClass, toggleClass.</h3>
	<p>Animar ao adicionar ou remover uma classe ao elemento:</p>
	<div style="float: left;">
        <div>
            <a id="botao_class_caixa_codigo1" href="#">Sintaxe</a>
            <div id="dialog_class_caixa_codigo1" title="addClass, removeClass, toggleClass" style="display: none;" class="dialog_apresentacao">
            <p>Métodos:</p>
            <ul>
                <li>addClass</li>  
                <li>removeClass</li>  
                <li>toggleClass</li>  
            </ul>
            <br/>
            <p>Sintaxe:</p>
            <pre>$( seletor ).addClass( 
    nome_da_classe,
    [velocidade],
    [callback]
);</pre>

            <br/>
            <br/>
            <p>Exemplo utilizado no slide:</p>
            <pre>$( "caixa_animada" ).addClass( 
    "classe_animada", 
    1000, 
    removeClasse
);</pre>

            </div>
        </div>

        <div>
            <a id="botao_class_caixa_azul" href="#">CSS </a>
            <div id="dialog_class_caixa_azul" title="Class Caixa Azul" style="display: none;"  class="dialog_apresentacao">
                <p>Class Caixa Azul:</p>
                <pre>.caixa_azul {
    padding: 0;
    margin: 0;
    border: 1px solid blue;
    background-color: rgb(192,192,255);
}</pre>

                <p>Class caixa_animada:</p>
                <pre>.classe_animada { 
    padding: 10px; 
    margin: 10px; 
    text-indent: 40px; 
    letter-spacing: .4em; 
    width: 420px; 
    height: 150px; 
    font-size: 1.6em; 
    color: red;
    background-color: yellow; 
}</pre>

            </div>
        </div>

    </div>
    
    <div style="float: left; margin-left: 80px; height: 150px; ">
        <div id="caixa_animada_class" class="draggable_azul">
        	<div style="margin: 50px; text-align: center;"><p>Eu sou uma caixa animada!</p></div>
        </div>
    </div>
    <div style="clear: both;" />    
	
    <p>
        Exemplos:
        <div id="botoes_de_efeitos_class" class="ui-widget-content" style="padding: 5px">
            <a id="bt_addClass" href="#">addClass</a>
            <a id="bt_addClassCallBack" href="#">addClass com callback</a>
            <a id="bt_removeClass" href="#">removeClass</a>
            <a id="bt_removeClassCallBack" href="#">removeClass com callback</a>
            <a id="bt_toggleClass" href="#">toggleClass</a>
        </div>
    </p>

    <style type="text/css" rel="stylesheet">
        #caixa_animada_class { margin: 5px auto; float: left; position: relative; }
        .classe_animada { text-indent: 40px; letter-spacing: .4em; width: 420px; height: 150px; padding: 10px; margin: 10px; font-size: 1.6em; color: red; background-color: yellow; }
	</style>
    
    <script type="text/javascript">
        inicializador.efeitosTransicoesClass = function() {

            var adicionaClasse = function(){
                $( "#caixa_animada_class" ).addClass( "classe_animada", 1000 );  
            };

            var removeClasse = function(){
                $( "#caixa_animada_class" ).removeClass( "classe_animada", 1000 );  
            };

            $( "#bt_addClass" ).button().click(function() {
                adicionaClasse();
            });

            $( "#bt_addClassCallBack" ).button().click(function() {
                $( "#caixa_animada_class" ).addClass( "classe_animada", 1000, removeClasse );
            });

            $( "#bt_removeClass" ).button().click(function() {
	            removeClasse();
            });

            $( "#bt_removeClassCallBack" ).button().click(function() {
                $( "#caixa_animada_class" ).removeClass( "classe_animada", 1000, adicionaClasse );
            });

            $( "#bt_toggleClass" ).button().click(function() {
	            $( "#caixa_animada_class" ).toggleClass( "classe_animada", 1000 );
            });

            $("#botao_class_caixa_codigo1").button().click(function() {
                $("#dialog_class_caixa_codigo1").dialog({
                    width: 600, height: 750, modal: true , 
                    buttons: { "Fechar": function() { $(this).dialog("close"); } }
                });
            });

            $("#botao_class_caixa_azul").button().click(function() {
                $("#dialog_class_caixa_azul").dialog({
                    width: 600, height: 750, modal: true , 
                    buttons: { "Fechar": function() { $(this).dialog("close"); } }
                });
            });

/*            $("#botao_class_caixa_animada").button().click(function() {
                $("#dialog_class_caixa_animada").dialog({
                    width: 600, height: 750, modal: true , 
                    buttons: { "Fechar": function() { $(this).dialog("close"); } }
                });
            });
*/
        }
    </script>
</div>
